@import '../abstracts/variables';

.mud-button-root {
  color: inherit;
  border: 0;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  outline: 0;
  padding: 0;
  position: relative;
  align-items: center;
  user-select: none;
  border-radius: 0;
  vertical-align: middle;
  -moz-appearance: none;
  justify-content: center;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;

  &::-moz-focus-inner {
    border-style: none;
  }

  &:disabled {
    color: var(--mud-palette-action-disabled) !important;
    cursor: default;
    pointer-events: none;
  }
}

.mud-button {
  padding: 6px 16px;
  font-family: var(--mud-typography-button-family);
  font-size: var(--mud-typography-button-size);
  font-weight: var(--mud-typography-button-weight);
  line-height: var(--mud-typography-button-lineheight);
  letter-spacing: var(--mud-typography-button-letterspacing);
  text-transform: var(--mud-typography-button-text-transform);
  min-width: 64px;
  box-sizing: border-box;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: var(--mud-default-borderradius);
  color: var(--mud-palette-text-primary);
  --mud-ripple-color: var(--mud-palette-text-primary);

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--mud-palette-action-default-hover);
    }
  }

  &:focus-visible, &:active {
    background-color: var(--mud-palette-action-default-hover);
  }
}

.mud-button-text {
  padding: 6px 8px;

  &.mud-button-text-inherit {
    color: inherit;
  }

  @each $color in $mud-palette-colors {
    &.mud-button-text-#{$color} {
      color: var(--mud-palette-#{$color});
      --mud-ripple-color: var(--mud-palette-#{$color});

      @media(hover: hover) and (pointer: fine) {
        &:hover {
          background-color: var(--mud-palette-#{$color}-hover);
        }
      }

      &:focus-visible, &:active {
        background-color: var(--mud-palette-#{$color}-hover);
      }
    }
  }
}

.mud-button-outlined {
  color: var(--mud-palette-text-primary);
  border: 1px solid rgb(from var(--mud-palette-text-primary) r g b / var(--mud-palette-border-opacity));
  padding: 5px 15px;

  &.mud-button-outlined-inherit {
    color: inherit;
    border-color: currentColor;
  }

  &.mud-icon-button {
    padding: 5px;
  }

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--mud-palette-action-default-hover);
    }
  }

  &:focus-visible, &:active {
    background-color: var(--mud-palette-action-default-hover);
  }

  @each $color in $mud-palette-colors {
    &.mud-button-outlined-#{$color} {
      color: var(--mud-palette-#{$color});
      --mud-ripple-color: var(--mud-palette-#{$color});
      border: 1px solid rgb(from var(--mud-palette-#{$color}) r g b / var(--mud-palette-border-opacity));

      @media(hover: hover) and (pointer: fine) {
        &:hover {
          border: 1px solid rgb(from var(--mud-palette-#{$color}) r g b / var(--mud-palette-border-opacity));
          background-color: var(--mud-palette-#{$color}-hover);
        }
      }

      &:focus-visible, &:active {
        border: 1px solid rgb(from var(--mud-palette-#{$color}) r g b / var(--mud-palette-border-opacity));
        background-color: var(--mud-palette-#{$color}-hover);
      }
    }
  }

  &:disabled {
    border: 1px solid var(--mud-palette-action-disabled-background);
  }
}

.mud-button-filled {
  color: var(--mud-palette-text-primary);
  --mud-ripple-color: var(--mud-palette-text-primary);
  --mud-ripple-opacity: var(--mud-ripple-opacity-secondary) !important;
  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
  background-color: var(--mud-palette-action-default-hover);

  &.mud-icon-button {
    padding: 6px;
  }

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0,0,0,.12);
      background-color: var(--mud-palette-action-disabled-background);
    }
  }

  &:focus-visible {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0,0,0,.12);
    background-color: var(--mud-palette-action-disabled-background);
  }

  &:active {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0,0,0,.12);
    background-color: var(--mud-palette-action-disabled-background);
  }


  &:disabled {
    color: var(--mud-palette-action-disabled);
    box-shadow: none;
    background-color: var(--mud-palette-action-disabled-background) !important;
  }

  @each $color in $mud-palette-colors {
    &.mud-button-filled-#{$color} {
      color: var(--mud-palette-#{$color}-text);
      --mud-ripple-color: var(--mud-palette-#{$color}-text);
      background-color: var(--mud-palette-#{$color});

      @media(hover: hover) and (pointer: fine) {
        &:hover {
          background-color: var(--mud-palette-#{$color}-darken);
        }
      }

      &:focus-visible, &:active {
        background-color: var(--mud-palette-#{$color}-darken);
      }
    }
  }
}

.mud-button-disable-elevation {
  box-shadow: none;

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      box-shadow: none;
    }
  }

  &:active {
    box-shadow: none;
  }

  &.mud-focus-visible {
    box-shadow: none;
  }

  &:disabled {
    box-shadow: none;
  }
}


.mud-button-color-inherit {
  color: inherit;
  border-color: currentColor;
}

.mud-button-text-size-small {
  padding: 4px 5px;
  font-size: 0.8125rem;
}

.mud-button-text-size-large {
  padding: 8px 11px;
  font-size: 0.9375rem;
}

.mud-button-outlined-size-small {
  padding: 3px 9px;
  font-size: 0.8125rem;

  &.mud-icon-button {
    padding: 4px;
  }
}

.mud-button-outlined-size-large {
  padding: 7px 21px;
  font-size: 0.9375rem;

  &.mud-icon-button {
    padding: 4px;
  }
}

.mud-button-filled-size-small {
  padding: 4px 10px;
  font-size: 0.8125rem;

  &.mud-icon-button {
    padding: 5px;
  }
}

.mud-button-filled-size-large {
  padding: 8px 22px;
  font-size: 0.9375rem;

  &.mud-icon-button {
    padding: 5px;
  }
}

.mud-button-full-width {
  width: 100%;
}

.mud-button-label {
  width: 100%;
  display: inherit;
  align-items: inherit;
  justify-content: inherit;

  .mud-button-icon-start {
    display: inherit;
    margin-left: -4px;
    margin-right: 8px;
    margin-inline-start: -4px;
    margin-inline-end: 8px;

    &.mud-button-icon-size-small {
      margin-left: -2px;
      margin-inline-start: -2px;
      margin-inline-end: 8px;
    }
  }

  .mud-button-icon-end {
    display: inherit;
    margin-left: 8px;
    margin-right: -4px;
    margin-inline-start: 8px;
    margin-inline-end: -4px;

    &.mud-button-icon-size-small {
      margin-right: -2px;
      margin-inline-end: -2px;
      margin-inline-start: 8px;
    }
  }
}





.mud-button-icon-size-small > *:first-child {
  font-size: 18px;
}

.mud-button-icon-size-medium > *:first-child {
  font-size: 20px;
}

.mud-button-icon-size-large > *:first-child {
  font-size: 22px;
}
